<template>
  <div class="service-container">
    <Carousel />
    <div class="area-header">
      <!-- <div class="all">全部</div>
      <div class="area-item">短信服务</div>
      <div class="area-item">识别服务</div>
      <div class="area-item">验证服务</div> -->
      <RouterLink
        v-for="(item, index) in items"
        :id="item.id"
        :key="item.link"
        :to="{ name: item.name }"
        active-class="selected"
        class="area-item"
      >
        <span>{{ item.title }}</span>
        <i class="iconfont icon-xiangxia" v-if="index !== 0"></i>
      </RouterLink>
    </div>
    <div class="area-body">
      <RouterView />
    </div>
  </div>
</template>

<script>
import Carousel from "@/components/Carousel";
export default {
  components: {
    Carousel,
  },
  data() {
    return {
      items: [
        {
          id: "all",
          name: "All",
          title: "全部",
          exact: false, //激活状态是否要精确匹配
        },
        {
          id: "note",
          name: "Note",
          title: "短信服务",
          exact: false,
        },
        {
          id: "identify",
          name: "Identify",
          title: "识别服务",
          exact: false,
        },
        {
          id: "validation",
          name: "Validation",
          title: "验证服务",
          exact: false,
        },
      ],
    };
  },
};
</script>

<style scoped lang="less">
@import "~@/styles/iconfont.css";
.service-container {
  .area-header {
    display: flex;
    padding: 21px 360px;
    box-shadow: 0px 1px 0px 0px #ededed;
    .iconfont {
      color: #000;
    }
    .all {
      margin-right: 40px;
    }
    .area-item {
      margin-right: 56px;
      &:hover {
        .iconfont {
          color: #168cfa;
        }
      }
      &.selected {
        color: #168cfa;
        .iconfont {
          color: #168cfa;
        }
      }
    }
  }
  .area-body {
    box-sizing: border-box;
    height: 928px;
    padding: 48px 350px 24px;
  }
}
</style>